<script lang="ts" setup>
import ClassBasicPanel from './components/ClassBasicPanel.vue'
import ClassCancelTab from './components/ClassCancelTab.vue'
import ClassChangeTab from './components/ClassChangeTab.vue'
import ClassLessonTab from './components/ClassLessonTab.vue'
import ClassPendingPayOrderTab from './components/ClassPendingPayOrderTab.vue'
import ClassStudentTab from './components/ClassStudentTab.vue'

const route = useRoute()
const classId = ref('')

onMounted(() => {
  classId.value = route.query.id as string
})
</script>

<template>
  <ProPage>
    <ClassBasicPanel :class-id="classId" />
    <a-tabs default-active-key="1" lazy-load class="mt-4">
      <a-tab-pane key="1">
        <template #title>
          <icon-user-group /> 学生名单
        </template>
        <ClassStudentTab />
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #title>
          <icon-calendar-clock /> 排课信息
        </template>
        <ClassLessonTab />
      </a-tab-pane>
      <a-tab-pane key="4">
        <template #title>
          <icon-share-internal /> 转班记录
        </template>
        <ClassChangeTab />
      </a-tab-pane>
      <a-tab-pane key="5">
        <template #title>
          <icon-export /> 退班记录
        </template>
        <ClassCancelTab />
      </a-tab-pane>
      <a-tab-pane key="6">
        <template #title>
          <icon-export /> 未支付学员
        </template>
        <ClassPendingPayOrderTab :class-id="classId" />
      </a-tab-pane>
    </a-tabs>
  </ProPage>
</template>

<style lang="less" scoped>
:deep(.arco-card-header) {
  // position: sticky;
  // top: 0;
  // z-index: 2;
  // background: #fff;
  padding: 0;
}
:deep(.arco-page-header) {
  padding: 10px 0;
}
</style>
